<template>
  <div class="menu">
    <el-col :span="24">
      <!-- background-color="#545c64" -->
      <el-menu
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :router="true"
        style="height: 100vh"
      >
        <el-menu-item index="1" @click="set_tab('概述', '/index')">
          <el-icon><House /></el-icon>
          <span>概述</span>
        </el-menu-item>

        <el-sub-menu>
          <template #title>
            <el-icon><Monitor /></el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item index="/users" @click="set_tab('角色管理', '/users')"
            >角色管理</el-menu-item
          >
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item
            index="/client-users"
            @click="set_tab('用户列表', '/client-users')"
            >用户列表</el-menu-item
          >
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><icon-menu /></el-icon>
            <span>业务管理</span>
          </template>
          <el-menu-item index="/order" @click="set_tab('订单管理', '/order')"
            >订单管理</el-menu-item
          >
          <el-menu-item index="/goods" @click="set_tab('商品管理', '/goods')"
            >商品管理</el-menu-item
          >
          <el-menu-item index="/goods-items" @click="set_tab('规格管理', '/goods-items')"
            >规格管理</el-menu-item
          >
          <el-menu-item index="/goods-accounts" @click="set_tab('商品账目', '/goods-accounts')"
            >商品账目</el-menu-item
          >
          
        </el-sub-menu>

        <el-menu-item index="picture" @click="set_tab('图片管理', '/picture')">
          <el-icon><Picture /></el-icon>
          <span>图片管理</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon><setting /></el-icon>
          <span>预留</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  User,
  House,
  Monitor,
  Picture,
} from "@element-plus/icons-vue";
import { ref, watch } from "vue";
import { useStore } from "vuex";
import { set_tab } from "../../../common/utils";

const store = useStore();
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const isCollapse = ref(store.state.menuCollapse || false);

watch(
  () => store.state.menuCollapse,
  (newVal: any) => {
    isCollapse.value = newVal;
  }
);

// };
</script>

<style>
</style>